<template>
	<el-card class="box-card exam-answer">
		<div class="count-down">
			<p class="num">{{ countDown(row.examDuration) }}</p>
			<p class="tips">倒计时</p>
		</div>
		<div class="exam-quick">
			<el-tabs type="card">
				<el-tab-pane v-for="v in testPaperChapterList" :key="v.id" :label="v.title">
					<ul class="num">
						<li
							:class="{ choose: isAnswer(item.id) }"
							v-for="(item, idx) in v.testSubjectVO"
							:key="item.id"
							@click="handleAnchor('#anchor' + item.id)"
							:href="'anchor' + item.id"
						>
							<a href="javascript:;">
								{{ ++idx }}
							</a>
						</li>
					</ul>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div class="exam-submit">
			<el-button type="primary" @click="handleSubmit()">交 卷</el-button>
		</div>
		<div style="clear: both"></div>
	</el-card>
</template>
<script>
import countDown from './countDown';
export default {
	mixins: [countDown],
	computed: {
		isAnswer() {
			return function (id) {
				return this.answerCard.filter((v) => v.id == id).length != 0;
			};
		}
	},
	props: ['row', 'answerCard', 'paperType', 'testPaperChapterList'],
	methods: {
		//确认交卷
		handleSubmit() {
			let list = this.row.testPaper.testPaperChapterList;
			let total = list.reduce((t, v) => {
				return this.paperType == 1 ? (t += v.testSubjectVO.length) : (t += v.testSubjectsList.length);
			}, 0);
			const h = this.$createElement;
			this.$msgbox({
				title: '提交试卷',
				message: h('p', null, [
					h('span', null, '本试卷共 '),
					h('b', { style: 'color: red' }, total),
					h('span', null, ' 道题，已答 '),
					h('b', { style: 'color: red' }, this.answerCard.length),
					h('span', null, ' 题，确定要交卷吗？')
				]),
				showCancelButton: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				beforeClose: (action, instance, done) => {
					if (action === 'confirm') {
						this.submitTest();
						done();
					} else {
						done();
					}
				}
			})
				.then(() => {})
				.catch(() => {});
		},
		//交卷
		async submitTest() {
			let answeredIds = this.answerCard.map((v) => v.id);
			let unAnswerArr = [];
			this.row.testPaper.testPaperChapterList.forEach((item) => {
				item.testSubjectVO.forEach((v) => {
					if (answeredIds.indexOf(v.id) == -1) {
						unAnswerArr.push({
							answer: v.testSubjects.type == 2 || v.testSubjects.type == 4 ? [] : '',
							id: v.id,
							score: v.score,
							subjectsType: v.testSubjects.type
						});
					}
				});
			});
			let obj = {
				testExam: this.paperType == 1 ? this.row : this.row2,
				testExamId: this.$route.query.id,
				testPaperAnswerVOList: [...this.answerCard, ...unAnswerArr]
			};
			await this.$store.dispatch('testExamSubmitPAPER', obj);
			// this.$router.push({ name: 'user-exam' })
			this.successMsg('试卷已提交成功');
			setTimeout(() => {
				window.close();
			}, 1500);
		},
		handleAnchor(selector) {
			document.querySelector(selector).scrollIntoView({
				behavior: 'smooth'
			});
		}
	}
};
</script>
<style scoped lang="scss">
.exam-answer {
	position: absolute;
	bottom: 0;
	width: 100%;
	.count-down {
		float: left;
		width: 100px;
		height: 100px;
		box-sizing: border-box;
		text-align: center;
		background: #f5f5f5;
		.num {
			font-size: 26px;
			color: #000;
			font-family: 'ds-digital-bold';
			margin: 25px 0 10px 0;
		}
		.tips {
			color: #999;
		}
	}
	.exam-quick {
		float: left;
		padding: 0 5px;
		width: calc(100% - 200px);
		height: 100px;
		border-bottom: 1px solid #f5f5f5;
		box-sizing: border-box;
		.num {
			li {
				float: left;
				margin: 5px;
				border-radius: 4px;
				border: 1px solid #eee;
				background: #f8f8f8;
				a {
					padding: 0 6px;
					display: block;
					color: #333;
				}
				&.choose,
				&:hover {
					background: var(--colorH1);
					border-color: var(--colorH1);
					a {
						color: #fff;
					}
				}
			}
		}
	}
	.exam-submit {
		float: right;
		width: 100px;
		height: 100px;
		text-align: center;
		background: #f5f5f5;
		box-sizing: border-box;
		button {
			margin-top: 30px;
		}
	}
}
</style>
